<template>
  <!--分页组件-->
  <!-- <div class="pagination" v-if="总条数大于0才有意义"> -->
  <div class="pagination" v-if="pageConfig.total > 0">
    <!--上一页-->
    <button
      :disabled="currentPage === 1"
      @click="changeCurrentPage(currentPage - 1)"
    >
      上一页
    </button>
    <!--第一页-->
    <button @click="changeCurrentPage(1)" v-if="startEnd.start > 1">1</button>
    <!--省略号-->
    <button disabled v-if="startEnd.start > 2">...</button>
    <!--连续页码-->
    <button
      v-for="(num, index) in startEnd.end"
      v-if="num >= startEnd.start"
      :key="num"
      :class="{ active: num === currentPage }"
      @click="changeCurrentPage(num)"
    >
      {{ num }}
    </button>
    <!--省略号-->
    <button disabled v-if="startEnd.end < totalPages - 1">...</button>
    <!--最后一页-->
    <button
      @click="changeCurrentPage(totalPages)"
      v-if="startEnd.end < totalPages"
    >
      {{ totalPages }}
    </button>
    <!--下一页-->
    <button
      :disabled="currentPage === totalPages"
      @click="changeCurrentPage(currentPage + 1)"
    >
      下一页
    </button>
    <!--总条数-->
    <button disabled style="margin-left: 30px">
      共{{ pageConfig.total }}条
    </button>
  </div>
</template>
<script>
export default {
  name: "Pagination",
  props: {
    // 配置的参数对象
    // pageConfig:()=>{return { type:.... }}
    pageConfig: {
      type: Object,
      // 设置该对象中的属性的默认值
      default: {
        total: 0, // 总的条数数据
        pageNo: 1, // 默认显示第一页的数据
        pageSize: 5, // 默认每页的条数
        showPageNo: 5, // 默认连续的页码数
      },
    },
  },
  data() {
    return {
      currentPage: this.pageConfig.pageNo, // 默认选中的页码
    };
  },
  // 监视
  watch: {
    // 监视页码数
    "pageConfig.pageNo"(val) {
      this.currentPage = val;
    },
  },
  // 计算属性
  computed: {
    // 总页数
    totalPages() {
      // 获取总条数和每页的条数
      const { total, pageSize } = this.pageConfig;
      // 数据要有意义才计算
      if (total <= 0 || pageSize <= 0) return;
      return Math.ceil(total / pageSize);
    },
    // 计算连续页码的开始页码和结束页码
    startEnd() {
      // 总的页码数,当前选中的页码数,连续页码数
      const {
        totalPages,
        currentPage,
        pageConfig: { showPageNo },
      } = this;
      // 开始页码: 当前选中页码- 向下取整(连续页码/2)
      let start = currentPage - Math.floor(showPageNo / 2);
      // 限制
      if (start <= 0) {
        start = 1;
      }
      // 结束页码: 当前选中页码+ 向下取整(连续页码/2)
      // let end = currentPage+Math.floor(showPageNo / 2)
      let end = start + showPageNo - 1;
      if (end > totalPages) {
        end = totalPages;
        if (start <= 0) {
          start = 1;
        }
      }
      return {
        start,
        end,
      };
    },
  },
  methods: {
    // 改变页码的方法
    changeCurrentPage(pageNo) {
      this.currentPage = pageNo;
      // 立刻通知外部组件,改变页码数
      this.$emit("changeCurrentPage", pageNo);
    },
  },
  // beforeCreate () {
  //   // 没有值
  //   console.log(this.pageConfig.pageNo+'====')
  // },
  // created () {
  //   console.log('==='+this.pageConfig.pageNo)
  //   console.log(this.currentPage)
  // }
};

/**
 *
 * 1. 自定义的组件,需要考虑别人在使用的时候,必须给这个组件传入数据
 *  1) 必须传入总的条数
 *  2) 默认显示第几页的数据
 *  3) 每页显示多少条数据
 *  4) 连续的页码是多少
 * 2. 该组件自己使用的数据:当前选中的页码数
 * 3. 该组件中的事件会不会触发一些操作,通知外部的组件---组件的通信,通信的方式:父子组件传递数据
 *   自定义事件或者props的方式向父级组件传递数据
 *
 *
 */
</script>
<style lang="less" scoped>
.pagination {
  button {
    margin: 0 5px;
    background-color: #f4f4f5;
    color: #606266;
    outline: none;
    border-radius: 2px;
    padding: 0 4px;
    vertical-align: top;
    display: inline-block;
    font-size: 13px;
    min-width: 35.5px;
    height: 28px;
    line-height: 28px;
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;
    border: 0;
    &[disabled] {
      color: #c0c4cc;
      cursor: not-allowed;
    }
    &.active {
      cursor: not-allowed;
      background-color: #409eff;
      color: #fff;
    }
  }
}
</style>